<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Chat</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    #chatContainer {
      max-width: 400px;
      margin: auto;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
    }

    #chatMessages {
      list-style: none;
      padding: 0;
      margin: 0;
      overflow-y: auto;
      max-height: 300px;
    }

    .message {
      margin-bottom: 8px;
      padding: 8px;
      border-radius: 5px;
    }

    .userMessage {
      background-color: #dff0d8;
    }

    .otherMessage {
      background-color: #d9edf7;
    }

    input[type="text"] {
      width: calc(100% - 20px);
      padding: 8px;
      margin-bottom: 8px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 8px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="chatContainer">
  <ul id="chatMessages"></ul>
  <input type="text" id="messageInput" placeholder="Type your message">
  <button onclick="sendMessage()">Send</button>
</div>

<script>
  const socket = new WebSocket('ws://localhost:3000');

  socket.addEventListener('open', (event) => {
    console.log('Connected to server');
  });

  socket.addEventListener('message', (event) => {
    const chatMessages = document.getElementById('chatMessages');
    const message = event.data;

    // Check if the message is a Blob
    if (message instanceof Blob) {
      const reader = new FileReader();
      reader.onload = function() {
        const textData = reader.result;
        const listItem = document.createElement('li');
        listItem.textContent = textData;
        listItem.className = 'otherMessage message';
        chatMessages.appendChild(listItem);
        chatMessages.scrollTop = chatMessages.scrollHeight;
      };
      reader.readAsText(message);
    } else {
      // If it's not a Blob, treat it as a regular string
      const listItem = document.createElement('li');
      listItem.textContent = message;
      listItem.className = 'otherMessage message';
      chatMessages.appendChild(listItem);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }
  });

  socket.addEventListener('close', (event) => {
    console.log('Connection closed');
  });

  function sendMessage() {
    const messageInput = document.getElementById('messageInput');
    const message = messageInput.value.trim();
    if (message !== '') {
      socket.send(`User: ${message}`);
      messageInput.value = '';

      const chatMessages = document.getElementById('chatMessages');
      const userMessage = document.createElement('li');
      userMessage.textContent = `User: ${message}`;
      userMessage.className = 'userMessage message';
      chatMessages.appendChild(userMessage);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }
  }
</script>
</body>
</html>
